<template>
  <div>
    <Modal v-model="showModal"
           :footer-hide="true"
           :closable="true"
           title="添加客房"
    >
    <Form ref="formValidate" :model="formValidate" :rules="rules" label-position="left" :label-width="80">
      <FormItem label="房间号" prop="roomCode">
        <Input v-model="formValidate.roomCode" placeholder="房间号"></Input>
      </FormItem>
      <FormItem label="日租费用" prop="dailyRent">
        <Input v-model="formValidate.dailyRent" placeholder="日租费用"></Input>
      </FormItem>
      <FormItem label="时租费用" prop="hourlyRate">
        <Input v-model="formValidate.hourlyRate" placeholder="时租费用"></Input>
      </FormItem>
      <FormItem label="房间类型" prop="roomType">
        <Select v-model="formValidate.roomType" placeholder="选择类型">
          <Option v-for="item in roomTypeData" v-model="item.id" :key="item.id">{{item.typeName}}</Option>
        </Select>
      </FormItem>
      <FormItem label="启用状态" prop="status">
        <RadioGroup  type="button" v-model="formValidate.status">
          <Radio label="InRenovation" value="1404">装修中</Radio>
          <Radio label="NewHome" value="1200">新置</Radio>
          <Radio label="Renovated" value="1500">已装修</Radio>
          <Radio label="JaneDecoration" value="1501">简装修</Radio>
          <Radio label="Exquisite" value="1599">精装修</Radio>
          <Radio label="FullyFurnished" value="1550">家具齐全</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem class="right">
        <Button type="primary" class="rapper" @click="handleSubmit">确定</Button>&ensp;
        <Button type="info" class="rapper" @click="handleReset">取消</Button>
      </FormItem>
    </Form>
    </Modal>
  </div>
</template>

<script>
import {getAllRoomType,addRoom} from "@/api/data";

export default {
  name: "AddRoom",
  props: {
    roomCodeRules: {
      type: Array,
      default: () => {
        return [
          {required: true,type:'string', message: '请输入房间号', trigger: 'blur'},
        ]
      }
    },
    dailyRentRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请输入日租费用', trigger: 'blur'},

        ]
      }
    },
    hourlyRateRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请输入时租费用', trigger: 'blur'}
        ]
      }
    },
    roomTypeRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '请选择房源类型', trigger: 'change',type:'number'}
        ]
      }
    },
  },
  data() {
    return {
      formValidate: {
        roomCode: '',
        dailyRent: '',
        hourlyRate: '',
        roomType: '',
        status:'',
      },
      roomTypeData:[],
      showModal:false
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          addRoom(this.formValidate).then(res=>{
            let data = res.data;
            if (data && data.code === 200) {
              this.$Message.success("添加成功！");
              this.$emit("refresh")
            } else {
              this.$Message.error(data.message);
            }
            this.closeModal();
          })
        }
      })
    },
    handleReset() {
      this.$refs.formValidate.resetFields();
      this.closeModal();
    },
    closeModal(){
      this.showModal = false;
    },
    openModal(){
      this.showModal = true;
    },
    getData() {
      this.loading = true
      getAllRoomType().then(data => {
        if (data.data.code !== 200 || !data.data.object) {
          this.$Message.error(data.data.message);
        } else {
          this.roomTypeData = data.data.object;
        }
        this.loading = false
      });
    }
  },
  mounted() {
    this.getData();
  },
  computed: {
    rules() {
      return {
        roomType: this.roomTypeRules,
        roomCode: this.roomCodeRules,
        dailyRent: this.dailyRentRules,
        hourlyRate: this.hourlyRateRules
      }
    }
  },
}
</script>

<style scoped>
.right {
  text-align: right
}
</style>
